
<div id="app">
  <button @click="words='猕猴桃'">吃别的</button>
  <button @click="obj.name='小韩'">改名字</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: '香蕉',
      obj: {
        name: '老韩'
      }
    },
    // watch  当某个数据变化了  需要做点啥事
    watch: {
      // 参数1  改变之后的值  参数2 改变之前的值
      words (newVal, oldVal) {
        console.log('有人偷吃', newVal, oldVal);
      },
      'obj.name' (newVal, oldVal) {
        console.log('改名了', newVal, oldVal);
      }
    }
  })
</script>